<template>
   <div>
      <div class="search_container">
         <div class="search_container_item">
            <div style="display: flex; flex: 2; margin-right: 20px">
               <span>姓名</span>
               <el-input
                  v-model="searchConditions.name"
                  class="search_input"
                  placeholder="要查询的姓名"
               />
            </div>
            <div style="display: flex; flex: 3; margin-right: 20px">
               <span style="flex: 2">登录账号</span>
               <el-input
                  style="flex: 3"
                  v-model="searchConditions.stuId"
                  class="search_input"
                  placeholder="登录账号"
               />
            </div>
         </div>
         <el-divider style="margin: 13px 0"></el-divider>
         <div class="search_container_button">
            <el-button
               style="width: 80px; height: 30px; margin-right: 30px"
               type="primary"
               @click="searchUserByConditions()"
               >查询</el-button
            >
            <el-button
               style="width: 80px; height: 30px"
               type="info"
               @click="resetSearch()"
               >重置</el-button
            >
         </div>
      </div>

      <!-- 用户列表 -->
      <div>
         <el-table
            style="border-radius: 10px"
            :data="userPageInfo.userList"
            stripe
            :header-cell-style="{ height: '60px', fontSize: '16px' }"
            :row-class-name="disabledUserTableClassName"
            :cell-style="{ height: '60px', fontSize: '14px' }"
            :default-expand-all="false"
         >
            <el-table-column
               prop="num"
               label="序号"
               header-align="center"
               min-width="100"
               align="center"
            >
            </el-table-column>
            <el-table-column
               prop="name"
               label="用户姓名"
               header-align="center"
               min-width="100"
               align="center"
            >
            </el-table-column>
            <el-table-column
               prop="stuId"
               label="登录账号"
               header-align="center"
               min-width="100"
               align="center"
            >
            </el-table-column>
            <el-table-column
               prop="email"
               label="邮箱"
               header-align="center"
               min-width="100"
               align="center"
            >
            </el-table-column>
            <el-table-column
               prop="telephone"
               label="联系电话"
               header-align="center"
               min-width="100"
               align="center"
            >
            </el-table-column>
            <el-table-column
               prop="roles"
               label="担任角色"
               header-align="center"
               min-width="100"
               align="center"
            >
               <template #default="{ row }">
                  <ul class="array-list">
                     <li
                        v-for="item in row.roles"
                        :key="item"
                        class="array-item"
                     >
                        {{ item.roleName }}
                     </li>
                  </ul>
               </template>
            </el-table-column>
            <el-table-column
               label="操作"
               width="240px"
               header-align="center"
               min-width="100"
               align="center"
            >
               <template v-slot="scope">
                  <el-tooltip
                     v-if="scope.row.accState"
                     effect="dark"
                     placement="top-start"
                     content="编辑用户信息"
                  >
                     <el-icon
                        @click="editUserInfoButtonClick(scope.row)"
                        style="
                           font-size: 21px;
                           color: #5a9cf8;
                           margin-right: 10px;
                           cursor: pointer;
                        "
                     >
                        <Edit />
                     </el-icon>
                  </el-tooltip>
                  <el-tooltip
                     v-if="scope.row.accState"
                     effect="dark"
                     content="初始化用户密码"
                     placement="top-start"
                  >
                     <el-icon
                        @click="resetUserPassword(scope.row)"
                        style="
                           font-size: 21px;
                           color: #5a9cf8;
                           margin-right: 10px;
                           cursor: pointer;
                        "
                        ><Clock
                     /></el-icon>
                  </el-tooltip>
                  <el-tooltip
                     v-if="scope.row.accState"
                     effect="dark"
                     content="禁用此用户"
                     placement="top-start"
                  >
                     <el-icon
                        @click="forbiddenUserAccount(scope.row)"
                        style="font-size: 21px; color: #5a9cf8; cursor: pointer"
                        ><CircleClose
                     /></el-icon>
                  </el-tooltip>

                  <el-tooltip
                     v-if="!scope.row.accState"
                     effect="dark"
                     content="启用此用户"
                     placement="top-start"
                  >
                     <el-icon
                        @click="enableUserAccount(scope.row)"
                        style="font-size: 21px; color: #5a9cf8; cursor: pointer"
                        ><CircleCheck
                     /></el-icon>
                  </el-tooltip>
               </template>
            </el-table-column>
         </el-table>

         <!-- 分页 -->
         <div
            v-show="!showSearchResult"
            style="display: inline-block; margin-top: 30px; text-align: center"
         >
            <el-pagination
               @current-change="getUserListPage"
               :current-page="userPageInfo.currentPage"
               :page-sizes="[5, 10, 20, 30, 40]"
               @size-change="pageSizeChange"
               :page-size="userPageInfo.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="userPageInfo.totalItemsNum"
            >
            </el-pagination>
         </div>
      </div>
   </div>
</template>

<script>
import $axios from "@/axios";
import { onMounted, reactive, ref } from "vue";

export default {
   name: "UserManagement",
   setup() {
      // 用户分页信息
      let userPageInfo = reactive({
         userList: [],
         currentPage: 1,
         pageSize: 10,
         totalItemsNum: 0,
      });

      // 页面选择一页的条数
      function pageSizeChange(newSize) {
         userPageInfo.pageSize = newSize;
         // 回到第一页
         getUserListPage(1);
      }

      // 获取用户列表分页信息
      function getUserListPage(page) {
         userPageInfo.currentPage = page;
         showSearchResult.value = false;

         $axios
            .get(
               "/user/listUsers/" +
                  userPageInfo.currentPage +
                  "/" +
                  userPageInfo.pageSize
            )
            .then((resp) => {
               // 给item添加序号
               for (let i = 0; i < resp.data.data.records.length; i++) {
                  resp.data.data.records[i].num =
                     (resp.data.data.current - 1) * resp.data.data.size + i + 1;
               }

               // 赋值
               userPageInfo.userList = resp.data.data.records;
               userPageInfo.currentPage = resp.data.data.current;
               userPageInfo.pageSize = resp.data.data.size;
               userPageInfo.totalItemsNum = resp.data.data.total;
            });
      }

      // ===============================

      // 被禁用用户的css类
      const disabledUserTableClassName = function ({ row }) {
         if (row.accState === false) {
            return "warning-row";
         }
         return "";
      };

      // ===============================

      // 搜索表单
      let searchConditions = reactive({
         name: "",
         stuId: "",
         roleId: "",
      });

      // 重置搜索框
      function resetSearch() {
         searchConditions.name = "";
         searchConditions.stuId = "";
         searchConditions.roleId = "";
      }

      let showSearchResult = ref(false);

      // 根据条件搜索
      function searchUserByConditions() {
         // 空条件
         if (
            searchConditions.name === "" &&
            searchConditions.stuId === "" &&
            searchConditions.roleId === ""
         ) {
            getUserListPage(1);
            return;
         }

         // 获取符合条件的用户
         $axios
            .post("/user/listUsersByConditions", searchConditions)
            .then((resp) => {
               // 给item添加序号
               for (let i = 0; i < resp.data.data.length; i++) {
                  resp.data.data[i].num = i + 1;
               }

               userPageInfo.userList = resp.data.data;
               showSearchResult.value = true;
            });
      }

      // 发送请求获取用户数据
      onMounted(async () => {
         getUserListPage(1);
      });

      return {
         userPageInfo,
         pageSizeChange,
         getUserListPage,
         disabledUserTableClassName,
         searchConditions,
         resetSearch,
         searchUserByConditions,
         showSearchResult,
      };
   },
};
</script>

<style scoped>
.array-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: 0;
   margin-left: 6px;
   padding: 0;
}

.array-item {
   list-style: none;
   margin-right: 6px;
   text-align: center;
}

.el-divider--vertical_userRowInfo {
   display: inline-block;
   width: 2px;
   height: 15em !important;
   margin-top: -28px;
   vertical-align: middle;
   position: relative;
}

.checkbox-group-class {
   margin-left: 30px;
}

.search_container {
   padding: 18px;
   background-color: #fff;
   border-radius: 10px;
   margin: 20px 0;
   font-size: 14px;
}

.search_container_item {
   width: 65%;
   display: flex;
}

.search_container_item span {
   flex: 1;
   margin-top: 5px;
   margin-right: 5px;
}

.search_container .search_input {
   flex: 3;
   height: 28px;
}

.search_container_button {
   display: flex;
   justify-content: flex-start;
   margin-left: 12px;
}
</style>

<style>
.el-table .warning-row td {
   color: red;
}

.select-trigger {
   line-height: 28px;
   height: 28px;
}

.el-input--suffix {
   height: 28px;
}
</style>